<script setup>
	import * as echarts from 'echarts'
	import {onMounted} from "vue";
	import {ref} from "vue";
	import {chartApi} from "@/api/chart.js";
	import dateUtil from '@/utils/dateUtil.js';
	
	const chartRef = ref()
	
	onMounted(() => {
		//echarts.init(document.getElementById('myChart'));
		const myChart = echarts.init(chartRef.value);
		chartApi.selectUserCount().then((result) => {
			if (result.code == 0) {
				const days = dateUtil.getMonthDays();
				console.log('天：'+days)
				const counts = new Array(days.length).fill(0);
				debugger
				for (let i = 0; i < days.length; i++) {
					for (let item of result.data) {
						if (item.day == days[i]) {
							counts[i] = item.count;
						}
					}
					
					days[i] = days[i].substring(8);
				}
				
				const option = {
					title: {
						text: '用户本月增长数量',
						left: 'center'
					},
					xAxis: {
						type: 'category',
						data: days
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							data: counts,
							type: 'line',
							smooth: true
						}
					]
				}
				
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		})
	})

</script>

<template>
	<div ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<style scoped>

</style>